import React, { useState } from "react";
import { Box } from "zmp-ui";
import IconReduce from "static/icon/icon-reduce.svg";
import IconAdd from "static/icon/icon-add.svg";
import styles from "./index.module.scss";
/** 数量添加器 */
const NumStep = (props: {
  value?: string | number;
  change?: (num: number) => void;
}) => {
  const [loading, setLoading] = useState(false);
  const [num, setNum] = useState(Number(props.value || 0));

  const onReduce = () => {
    if (num > 0) {
      setNum(num - 1);
      props.change && props.change(num - 1);
    }
  };
  const onAdd = () => {
    setNum(num + 1);
    props.change && props.change(num + 1);
  };
  return (
    <Box flex alignItems="center">
      <div className={styles["npm-step-wrapper"]}>
        {num > 0 ? (
          <img
            src={IconReduce}
            className={styles["icon-btn"]}
            onClick={onReduce}
          />
        ) : null}
        {num > 0 ? <div className={styles["num-step-input"]}>{num}</div> : null}
        <img src={IconAdd} className={styles["icon-btn"]} onClick={onAdd} />
      </div>
    </Box>
  );
};
export default NumStep;
